<style type="text/css">
    .example {
        height:100%;position: relative;
    }
    .example > span {
        position:absolute;left:15px;top:15px;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null, false)}
    </div>

    <div class="panel-body">
        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/basic.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Basic configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="meet"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/member.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Member configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="user"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/wxapp.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('WeChat applet configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="wxMiniProgram"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/mall.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Mall configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="mall"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/wechat.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('WeChat configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="wechat"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/wechat_pay.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('WeChat payment configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="wxPayment"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/share.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Share configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="share"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/order.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Order configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="order"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-2">
            <div class="thumbnail example">
                <img src="__CDN__/assets/img/config/third.png" style="width:100%;" alt="">
                <div class="caption">
                    <h3>{:__('Third-party service configuration')}</h3>
                    <div style="display: flex;justify-content: end;">
                        <a href="javascript:void(0);" class="btn btn-info btn-setup" data-key="services"> {:__('Set Now')}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
